<template>
    <div >
        <div class="insert-resource-box">
            <div>
                资源名<input type="text"   v-model="obj.form.name" >
            </div>
            <div>
                资源链接<input type="text"  v-model="obj.form.link" >
            </div>
            <div> 图片<input type="text" v-model=obj.form.image></div>
            <div style="width: 300px;height:200px">
                <span style="margin-left: 30px;float: left;">图片预览 : </span>
                <img :src="obj.form.image" alt="" style="width: 150px;height: 150px;object-fit: cover" v-show="obj.form.image">
            </div>
            <div>
                介绍<input type="text"  v-model="obj.form.des" >
            </div>
            <el-button @click="submitResource">提交</el-button>
        </div>

    </div>
</template>

<script>
    import {reactive} from "@vue/reactivity";
    import axios from 'axios'
    import {useRouter} from "vue-router";
    import {errorMessage, rejectMessage, successMessage} from "@/assets/js/utils";

    export default {
        name: "InsertResource",
        setup(){
            let router=useRouter()
            let obj=reactive({
                form:{
                    name:"",
                    des:"",
                    link:"",
                    image:""
                }
            })


            let submitResource=()=>{

                axios.post("/api/ylb/res/insert",{
                    rImage:obj.form.image,
                    rName:obj.form.name,
                    rDes:obj.form.des,
                    link:obj.form.link
                },{
                    headers:{
                        token:localStorage.getItem("token")
                    }
                }).then(resp=>{
                    if(resp.data.code===200){
                        successMessage("添加资源成功")
                        router.push("/resource")
                    }else{
                        if(rejectMessage(resp)){

                        }else{
                            errorMessage(resp.data.msg)
                        }

                    }
                })
            }
            return{
                obj,
                submitResource
            }
        }
    }
</script>

<style scoped lang="less">
    .insert-resource-box{
        width: 100%;
        min-height: 500px;
        background-color: white;
        opacity: 0.9;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 100px 0  100px 0;
        div{
            height:50px;
            text-align: center;
        }
        input[type='text']{
            width: 500px;
            height: 30px;
            margin-bottom: 30px;
            margin-left: 30px;
            border: none;
            border-bottom: 1px solid black;
            outline: none;
            font-size: 18px;
        }
    }
</style>